const pagesData = require("dev/data/pages.json");

export default {
	name: "create-page",
	data() {
		return {
			title: "页面树",
			showSearch: false,
			showAdd: false,
			showParams: false,
			currentNode: {},
			dialogAddFormVisible: false,
			dialogSearchParamsVisible: false,
			dialogSearchColumsVisible: false,
			mainItems: [
				{label: "编号", kind: "input", prop: "id", disabled: true},
				{label: "组件名", kind: "input", prop: "componentName", disabled: false},
				{
					label: "页面种类", kind: "select", prop: "operate", disabled: false,
					selectOptions: [
						{value: "blank", label: "自定义"},
						{value: "form", label: "表单"},
						{value: "table", label: "表格"}
					]
				},
				{
					label: "是否升级", kind: "select", prop: "isUpdate", disabled: false,
					selectOptions: this.constants.select.booleanOptions
				},
				{label: "文件名", kind: "input", prop: "fileName", disabled: false},
				{label: "文件夹", kind: "input", prop: "folder", disabled: false}
			],
			minorItems: [
				{
					label: "编辑种类", kind: "select", prop: "action", disabled: false,
					selectOptions: [
						{value: "add", label: "新增"},
						{value: "update", label: "更新"}
					]
				},
				{
					label: "斑马纹", kind: "select", prop: "stripe", disabled: false,
					selectOptions: this.constants.select.booleanOptions
				},
				{
					label: "多选", kind: "select", prop: "isMultiple", disabled: false,
					selectOptions: this.constants.select.booleanOptions
				},
				{
					label: "汇总", kind: "select", prop: "isSum", disabled: false,
					selectOptions: this.constants.select.booleanOptions
				},
				{
					label: "表单列宽", kind: "select", prop: "colWidth", disabled: false,
					selectOptions: [
						{value: 4, label: "4"},
						{value: 6, label: "6"},
						{value: 8, label: "8"},
						{value: 12, label: "12"},
						{value: 16, label: "16"},
						{value: 20, label: "20"}
					]
				},
				{label: "元素宽度", kind: "input", prop: "itemWidth", disabled: false}
			],
			params: {
				action: "add",
				stripe: true,
				isSum: false,
				isMultiple: false,
				colWidth: 8,
				itemWidth: 22,
				firstParams: [],
				secondParams: [],
				columns: [],
				formItems: [],
				formParams: {}
			},
			searchParamsData: [
				{label: "编号", kind: "input", prop: "id", disabled: true}
			],//
			searchParamsColumns: [
				{label: "名称", prop: "prop", kind: "input", width: 150, disabled: false},
				{label: "标题", prop: "label", kind: "input", width: 165, disabled: false},
				{label: "种类", prop: "kind", kind: "select", width: 230, disabled: false, selectOptions: this.constants.select.inputTypeOptions},
				{
					label: "不可变", prop: "disabled", kind: "select", width: 140, disabled: false,
					selectOptions: this.constants.select.booleanOptions
				}
			],//serach页面
			searchColumnsData: [
				{label: "编号", prop: "id", kind: "input", width: 120, sortable: true, isSum: false}
			],//serach页面
			searchColumnsColumns: [
				{label: "属性", prop: "prop", kind: "input", width: 165, disabled: false},
				{label: "标题", prop: "label", kind: "input", width: 200, disabled: false},
				{label: "种类", prop: "kind", kind: "select", width: 260, disabled: false, selectOptions: this.constants.select.columnInputOptions},
				{label: "列宽", prop: "width", kind: "number", width: 165, disabled: false},
				{
					label: "可排序", prop: "sortable", kind: "select", width: 140, disabled: false,
					selectOptions: this.constants.select.booleanOptions
				},
				{
					label: "是否求和", prop: "isSum", kind: "select", width: 140, disabled: false,
					selectOptions: this.constants.select.booleanOptions
				}
			],
			addFormData: [
				{label: "编号", kind: "input", prop: "id", isEdit: false, disabled: true}
			],//add页面
			addFormColumns: [
				{label: "名称", prop: "prop", kind: "input", width: 150, disabled: false},
				{label: "标题", prop: "label", kind: "input", width: 165, disabled: false},
				{label: "种类", prop: "kind", kind: "select", width: 230, disabled: false, selectOptions: this.constants.select.inputTypeOptions},
				{
					label: "是否更新", prop: "isEdit", kind: "select", width: 112, disabled: true,
					selectOptions: this.constants.select.booleanOptions
				},
				{
					label: "不可变", prop: "disabled", kind: "select", width: 125, disabled: false,
					selectOptions: this.constants.select.booleanOptions
				}
			],
			pageList: [],
			rules: {
				componentName: [
					{required: true, message: "请输入组件名", trigger: "blur"}
				],
				operate: [
					{required: true, message: "请选择页面类型", trigger: "blur"}
				],
				fileName: [
					{required: true, message: "请输入文件名", trigger: "blur"}
				],
				folder: [
					{required: true, message: "请输入文件目录", trigger: "blur"}
				],
				action: [
					{required: true, message: "请选择页面编辑类型", trigger: "blur"}
				]
			}
		};
	},
	computed: {
		pages() {
			return this.develop.loadPages();
		},
		mainPageParams() {
			//初始化node显示信息
			let data = {};
			if (!this.currentNode || Object.keys(this.currentNode).length === 0) {
				const childPage = this.pages[0].children[0];
				if (this.menuHandler.hasChildren(childPage)) {
					data = childPage.children[0];
				} else {
					data = childPage;
				}
			} else {//正常点击node显示信息
				data = this.currentNode;
			}
			this.setVisiable(data.operate);
			return data;
		}
	},
	methods: {
		edit(node, data) {
			if (!data.componentName) {
				return;
			}
			this.currentNode = data;
		},
		handleSave() {
			this.updateParams();
			this.pageList.push(this.mainPageParams);
			let pages = this.pageList;
			pages.forEach((page, i) => {
				const item = pagesData.filter(item => item.id.toString() === pages[i].id.toString())[0];
				if (item) {
					if (!page.isUpdate) {
						pages.splice(i, 1);
					} else {
						const index = pagesData.findIndex(d => d.id.toString() === item.id.toString());
						pagesData.splice(index, 1);
					}
				}
			});
			this.downLoadData(pages.concat(pagesData));
			console.log(this.mainPageParams);
		},
		downLoadData(data) {
			this.resourceUtils.download(data, "pages.json");
		},
		updateParams() {
			let mainParams = this.resourceUtils.removeInvalid(this.mainPageParams);
			let params = this.resourceUtils.removeInvalid(this.params);
			if (!this.validateParams(params)) {
				return;
			}
			this.mainPageParams = mainParams;
			this.mainPageParams.params = this.resetParams(mainParams.operate, params);
		},
		validateParams(params) {
			if (params.itemWidth && (Number(params.itemWidth) < 12 || Number(params.itemWidth) > 24)) {
				this.message.error("请输入元素宽度值在 12 至 24 之间");
				return false;
			}
			return true;
		},
		resetParams(operate, params) {
			if (operate === "blank") {
				params = [];
			} else if (operate === "form") {
				params.firstParams = [];
				params.secondParams = [];
				params.columns = [];
			} else if (operate === "table") {
				params.formItems = [];
				params.formParams = {};
			}
			return params;
		},
		handleChange(prop, form) {
			if (prop === "operate") {
				this.setVisiable(form[prop]);
			}
		},
		setVisiable(operate) {
			this.showSearch = operate === "table";
			this.showAdd = operate === "form";
			this.showParams = operate !== "blank";
			this.dialogAddFormVisible = false;
			this.dialogSearchParamsVisible = false;
			this.dialogSearchColumsVisible = false;
		},
		addParams() {
			this.dialogSearchParamsVisible = true;
			this.dialogSearchColumsVisible = false;
		},
		addColums() {
			this.dialogSearchParamsVisible = false;
			this.dialogSearchColumsVisible = true;
		},
		addForms() {
			this.dialogAddFormVisible = true;
		},
		appendRow(rowIndex) {
			if (this.searchParamsData.length >= 11) {//查询参数最多11个
				return;
			}
			this.searchParamsData.push({label: "", kind: "input", prop: "", disabled: false});
		},
		removeRow(rowIndex) {
			if (rowIndex === 0) {
				return;
			}
			this.searchParamsData.splice(rowIndex, 1);
		},
		appendColumn(rowIndex) {
			this.searchColumnsData.push({label: "", prop: "", kind: "input", width: 0, sortable: false, isSum: false});
		},
		removeColumn(rowIndex) {
			if (rowIndex === 0) {
				return;
			}
			this.searchColumnsData.splice(rowIndex, 1);
		},
		appendForm(rowIndex) {
			this.addFormData.push({label: "", kind: "input", prop: "", isEdit: false, disabled: false});
		},
		removeForm(rowIndex) {
			if (rowIndex === 0) {
				return;
			}
			this.addFormData.splice(rowIndex, 1);
		},
		handleSubmitParams() {
			this.params.firstParams = this.searchParamsData;
			this.dialogSearchParamsVisible = false;
			this.dialogSearchColumsVisible = false;
			console.log(this.searchParamsData);
		},
		handleSubmitColumns() {
			this.params.columns = this.searchColumnsData;
			this.dialogSearchColumsVisible = false;
			this.dialogSearchParamsVisible = false;
			console.log(this.searchColumnsData);
		},
		handleSubmitForms() {
			this.params.formItems = this.addFormData;
			this.dialogAddFormVisible = false;
			console.log(this.addFormData);
		},
		handleCloseParams() {
			this.dialogSearchParamsVisible = false;
			this.dialogSearchColumsVisible = false;
		},
		handleCloseColumns() {
			this.dialogSearchColumsVisible = false;
			this.dialogSearchParamsVisible = false;
		},
		handleCloseForms() {
			this.dialogAddFormVisible = false;
		}
	}
};
